<script setup>
import { searchBanner } from '/src/api/layout.js'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import banner1 from '@/assets/shops/banner1.jpeg'
import banner2 from '@/assets/shops/banner2.png'
const router = useRouter()
const needdata = ref([])
const bannerData = ref([
  {
    id: 1,
    img: banner1
  },
  {
    id: 2,
    img: banner2
  }
])
const params = ref({
  pageNum: 1,
  pageSize: 10
})
const getdata = async (categoryId) => {
  const res = await searchBanner(categoryId, params.value)
  needdata.value = res.data
}
const activeTab = ref('first')
const handleClick = (tab, event) => {
  console.log(tab, event)
}
defineProps({
  // 商品种类数据
  categorydata: {},
  // 轮播图数据
  ndata: {}
})
</script>
<template>
  <div class="banner">
    <div class="banner-panel">
      <div class="tabs">
        <el-tabs v-model="activeTab" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="公告" name="first">公告 </el-tab-pane>
          <el-tab-pane label="二手" name="second">二手</el-tab-pane>
          <el-tab-pane label="遗物" name="third">遗物</el-tab-pane>
          <el-tab-pane label="咨询" name="fourth">资讯</el-tab-pane>
        </el-tabs>
      </div>
      <div class="wrap">
        <el-carousel trigger="click" height="460px">
          <el-carousel-item v-for="item in bannerData" :key="item">
            <img :src="item.img" alt="" />
          </el-carousel-item>
        </el-carousel>
        <div class="slide">
          <ul v-for="item in 8" :key="item">
            <li>
              手机<i class="iconfont">></i>
              <div class="slide-list">
                <!-- <img src="" alt="" /> -->
                <span>小米手机至尊版</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- <div class="user-infos"></div> -->
  </div>
</template>
<style scoped lang="scss">
.banner {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 16px;

  .banner-panel {
    display: flex;
    gap: 10px;
    width: 1426px;
    height: 460px;
    .tabs {
      border: 1px solid #e0e0e0;
      padding: 14px;
      width: 20%;
    }
    .wrap {
      position: relative;
      flex: 1;
      height: 100%;
    }

    img {
      width: 100%;
      height: 100%;
    }

    .slide {
      padding: 16px 0;
      width: 234px;
      height: 100%;
      background-color: rgba(105, 101, 101, 0.6);
      position: absolute;
      left: 0;
      top: 0;

      & > ul > li {
        height: 52px;
        line-height: 52px;
        padding-left: 30px;
        font-size: 14px;
        color: white;
        i {
          float: right;
          padding-right: 20px;
        }
      }

      & > ul > li:hover {
        background-color: #ff6700;
      }
    }

    .slide-list {
      width: 992px;
      height: 460px;
      background-color: white;
      border: 1px solid #e0e0e0;
      box-sizing: border-box;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
      position: absolute;
      left: 234px;
      top: 0;
      display: none;
      color: black;
    }

    ul > li:hover .slide-list {
      display: block;
    }
  }
}
</style>
